<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .selected {
            background-color: beige;
        }
    </style>
</head>

<body>

    <ul id="lists">
        <li data-item>l1</li>
        <li data-item>l2</li>
        <li data-item>l3</li>
        <li data-item>l4</li>
    </ul>
    <script>
        const lis = document.querySelectorAll('#lists li');
        document.onclick = function (e) {
            const target = e.target;
            const item = target.dataset.item;
            //筛选节点
            if (item === undefined) return;

            // 执行业务逻辑
            //单选
            if (e.ctrlKey === false) {
                // 按下ctrl 多选
                lis.forEach(el => el.classList.remove('selected')); // 删除已经选择的背景类
            }
            target.classList.add('selected')


        }





    </script>

</body>

</html>